<template>
  <view class="page-container">
    <!-- 自定义标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        v-for="(item, index) in tabList" 
        :key="index" 
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ item.name }}
      </view>
    </view>
    
    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <view 
        class="coupon-item" 
        v-for="(item, index) in couponList" 
        :key="item.id"
      >
        <view class="order-info">
          <view>订单编号：{{ item.orderNo }}</view>
          <view class="status-tag">{{ item.writeOffStatus === 0 ?  (currentTab == 0 ? (item.refundApplyStatus == 1 ? '退款中' :  (item.refundApplyStatus == 3 ? '审核失败' : '待核销')) : '已退款') : (currentTab == 1 ? '已核销' : '已退款') }}</view>
        </view>
        <view class="coupon-content">
          <view class="coupon-img">
            <image :src="'https:' + item.productCoverImage" mode="aspectFill"></image>
          </view>
          <view class="coupon-info">
            <view class="coupon-title">{{ item.productName }}</view>
            <view class="coupon-price">￥{{ item.productPrice || '0.00' }}</view>
			<view class="coupon_sum">×{{item.quantity}}</view>
			<view class="coupon_jf">
				<image src="/static/my/integra.png" mode="widthFix"></image>
				<view>{{item.productCredit}}</view>
			</view>
          </view>
        </view>
        <view class="coupon-footer">
          <view class="use-date">兑换日期：{{ item.createTime | formatDate }}</view>
		  <view
		    class="verify-btn1" 
		    @click="goRefund(item)" 
		    v-if="item.writeOffStatus === 0 && currentTab == 0  && item.refundApplyStatus != 1"
		  >
		    <view>退款</view>
		  </view>
          <view 
            class="verify-btn" 
            @click="goToVerify(item.id)" 
            v-if="item.writeOffStatus === 0 && currentTab == 0 && item.refundApplyStatus != 1"
          >
            <image src="/static/my/ewm.png" mode="widthFix" class="verify-icon"></image>
            <view>去核销</view>
          </view>
        </view>
		<view class="bohx" v-if="item.refundApplyStatus == 3">
		 <view>退款失败原因：</view>
		 <view style="flex: 1;">{{item.auditRemark}}</view>
		</view>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading-status" v-if="loading">
        <view class="loading-animation">
          <view class="loading-dot" v-for="i in 3" :key="i"></view>
        </view>
        <view class="loading-text">加载中...</view>
      </view>
      
      <view class="no-more-data" v-if="noMoreData">
        <view class="no-more-text">已加载全部内容</view>
      </view>
    </view>
  </view>
</template>

<script>
import { creditOrderpage } from '@/core/api/index.js'
export default {
  data() {
    return {
      currentTab: 0,
      tabList: [
        { name: '待核销', status: 0 },
        { name: '已核销', status: 1 },
		{ name: '已退款', status: 2 }
      ],
      couponList: [],
      page: 1,             // 当前页码
      pageSize: 10,        // 每页数量
      total: 0,            // 总数据量
      loading: false,      // 加载中状态
      noMoreData: false,   // 无更多数据
      isLoaded: false,     // 数据已加载完成
    }
  },
  onShow() {
    this.loadData(); // 初始化加载第一页数据
  },
  onReachBottom() {
    // 触底时加载更多（非加载中且有更多数据时）
    if (!this.loading && !this.noMoreData) {
      this.loadMore();
    }
  },
  methods: {
    // 切换标签
    switchTab(index) {
      this.currentTab = index;
      this.resetPage(); // 重置分页状态
      this.loadData(); // 加载新标签数据
    },
    // 重置分页状态
    resetPage() {
      this.page = 1;
      this.couponList = [];
      this.noMoreData = false;
      this.isLoaded = false;
    },
    // 加载数据
    async loadData() {
      this.loading = true;
      try {
        const params = {
          page: this.page,
          size: this.pageSize,
          condition: {
            // writeOffStatus: this.tabList[this.currentTab].status,
			...(this.currentTab != 2 && { writeOffStatus: this.tabList[this.currentTab].status }),
			// refundStatus:this.currentTab == 2 ?  1 : 0
			...(this.currentTab === 2 && { refundStatus: 1 }),
			...(this.currentTab === 0 && { refundStatus: 0 })
          }
        };
        const { data } = await creditOrderpage(params);
        
        // 处理返回数据
        if (this.page === 1) {
          this.couponList = data.records || [];
        } else {
          this.couponList = [...this.couponList, ...(data.records || [])];
        }
        
        this.total = data.total || 0;
        this.isLoaded = true;
        
        // 判断是否还有更多数据
        if (this.couponList.length >= this.total) {
          this.noMoreData = true;
        } else {
          this.page++; // 准备加载下一页
        }
      } catch (error) {
        console.error('加载失败', error);
      } finally {
        this.loading = false;
      }
    },
    // 加载更多
    loadMore() {
      this.loadData();
    },
    // 去核销
    goToVerify(id) {
      uni.navigateTo({
        url: `/pages/my/order_verification?id=${id}`
      });
    },
	goRefund(item){
		uni.navigateTo({
		  url: `/pages/my/refund?item=${encodeURIComponent(JSON.stringify(item))}&type=1`
		});
	}
    // 格式化日期
  }
}
</script>

<style lang="scss">
/* 样式部分与原代码一致，无需修改 */
.page-container {
  padding-bottom: 30rpx;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 88rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
  padding-bottom: 20rpx;
}

.tab-item.active {
  color: #EF7B3A;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background-color: #EF7B3A;
  border-radius: 3rpx;
}

.coupon-list {
  padding: 20rpx;
}
.bohx{
	font-size: 24rpx;
	color: #F26B2E;
	display: flex;
	padding: 0 20rpx;
	padding-bottom: 25rpx;
	view{
		// width: 200rpx;
		// color: #333;
	}
}
.coupon-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-info {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 20rpx;
  border-bottom: 1rpx solid #F5F5F5;
}

.order-info view:first-child {
  font-size: 24rpx;
  color: #333;
}

.status-tag {
  font-size: 24rpx;
  color: #F26B2E;
}

.coupon-content {
  display: flex;
  padding: 20rpx;
}

.coupon-img {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.coupon-img image {
  width: 100%;
  height: 100%;
}

.coupon-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  .coupon_sum{
	  position: absolute;
	  right: 0%;
	  top: 0%;
  }
  .coupon_jf{
	  position: absolute;
	  right: 0%;
	  bottom:0%;
	  image{
		  width: 20rpx;
		  margin-right: 5rpx;
	  }
	  display: flex;
	  align-items: center;
	  font-size: 32rpx;
	  font-weight: 600;
  }
}

.coupon-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 30rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.coupon-price {
  font-size: 32rpx;
  color: var(--, #666);

  font-weight: 600;
}

.coupon-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-top: 1rpx solid #F5F5F5;
}

.use-date {
  font-size: 24rpx;
  color: #999;
}

.verify-btn , .verify-btn1{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130rpx;
  height: 52rpx;
  background-color: #F26B2E;
  color: #fff;
  font-size: 24rpx;
  border-radius: 26rpx;
}
.verify-btn1{
	background-color: #fff;
	color: #A3A3A3;
	border: 1rpx solid #A3A3A3;
	margin-left: 25rpx;
}

.verify-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 6rpx;
}

.loading-status {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
}

.loading-animation {
  width: 40rpx;
  height: 40rpx;
  position: relative;
  margin-right: 15rpx;
}

.loading-dot {
  position: absolute;
  width: 10rpx;
  height: 10rpx;
  background-color: #F26B2E;
  border-radius: 50%;
  animation: loading-dot 1.2s infinite ease-in-out;
}

.loading-dot:nth-child(1) {
  top: 0;
  left: 0;
  animation-delay: -0.4s;
}

.loading-dot:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: -0.2s;
}

.loading-dot:nth-child(3) {
  bottom: 0;
  left: 0;
  animation-delay: 0s;
}

.no-more-data, .empty-tip {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

.no-more-text {
  display: inline-block;
  padding: 10rpx 20rpx;
  background-color: #F5F5F5;
  border-radius: 30rpx;
}

.empty-tip {
  color: #A3A3A3;
}

@keyframes loading-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}
</style>